<script>
import * as echarts from 'echarts'
export default {


  name: "EchartsExamplePage",
  data() {
    return{
      categoryData:['华为手机','小米手机','三星手机','苹果手机'],
      seriesData:[
        {
          name:'2022销量',
          type:'bar',
          data:[8888,7777,6666,4444]

        },
        {
          name:'2023销量',
          type:'bar',
          data:[9999,6667,3666,7744]


        } ,

      ]




    }


  },
  methods:{
    RefreshDataToEcharts(){
      const myChart = echarts.init(document.getElementById('my-chart'),'dark')
      const option = {
        legend:{
          data:[this.seriesData[0],this.seriesData[1]]
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'shadow'
          }


        },

        xAxis :{
          type:'category'
        },
        yAxis:{
          type:'value'
        },
        series: this.seriesData

      }
      myChart.setOption(option)
    },
    HandleTableClick(tab){
      if (tab.name === 'EchartsView'){
      this.RefreshDataToEcharts()
      }
    },


  }

}
</script>

<template>
<div>
  <el-card>
    <div slot="header">
      <span>数据统计</span>
    </div>
    <div>
      <el-tabs @tab-click = "HandleTableClick">
        <el-tab-pane label="表格视图" name="TableView">这里有一个表格</el-tab-pane>
        <el-tab-pane label="可视化视图" name="EchartsView">
          <div id="my-chart" style="width:800px;height: 600px">

          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</div>
</template>

<style scoped>

</style>